<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous"> -->
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- <link rel="stylesheet" href="../css/demo.css">
    <link rel="stylesheet" href="../css/theme.css"> -->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!-- 引入bootstrap图标样式 -->
    <link rel="stylesheet" href="../css/bootstrap-icons.css">
    <!-- 引入bootstrapjs样式 -->
    <link rel="stylesheet" href="../js/demo.js">
    <link rel="stylesheet" href="../js/theme.js"> 
    <link rel="stylesheet" href="../js/bootstrap.bundle.js">
</head>
<body>
    <!-- 头部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light nav-z">
        <div class="container-fluid">
          <a class="navbar-brand" href="homepage.html">De小房间</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse nav justify-content-end" id="navbarTogglerDemo02">
            <ul class="navbar-nav me-end mb-0 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="homepage.html">
                    <button type="button" class="btn btn-primary ">首页</button>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="position.html">
                    <button type="button" class="btn btn-outline-primaryz">职位</button>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                    <button type="button" class="btn btn-outline-primaryz">产品与服务</button>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                    <button type="button" class="btn btn-outline-primaryz">工作地点</button>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                    <button type="button" class="btn btn-outline-primaryz">校园招聘</button>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="wechat.html">
                    <button type="button" class="btn btn-outline-primaryz">
                        <i class="bi bi-wechat"></i>
                    </button>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="https://gitee.com/fu-yuntao/full-stack-project.git">
                    <button type="button" class="btn btn-outline-primaryz">
                        <i class="bi bi-git"></i>
                    </button>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="register.html">
                    <button type="button" class="btn btn-outline-primaryz">登录</button>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" style="margin-top: 8px;">|</a> 
              </li>
              <li class="nav-item">
                <a class="nav-link" href="logon.html">
                    <button type="button" class="btn btn-outline-primaryz">注册</button>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
     <!-- 主体内容 -->
     <main>
      <!-- 轮播图 -->
          <div class="box">
            <div class="ro">
                <h1>激发创造，丰富生活</h1>
                <h2>JOIN BYTEDANCE</h2>
            </div>
            <!-- <div style="display: flex; margin:0 auto;"> -->
              <input type="text" class="form-controlz" placeholder="输入城市或职位进行搜索" >
              <a href="position.html" class="nav-link active" >
                <button type="button" class="btn btn-primary b" >搜索</button>
              </a>        
            <!-- </div> -->
          </div>
          <div style="height: 800px;">
            <div class="title" style="text-align: center; ">
              <h3><strong>Inspire creativity, enrich life</strong></h3>
              <h6>字节跳动在全球推出了多款有影响力的产品，公司业务覆盖 150 个国家和地区</h6>
            </div>
            
          </div>
          <div style="height: 800px;">
            <div class="title">
              <h3 style="text-align: center; "><strong>探索你感兴趣的职位</strong></h3>
            </div>
            
            <div class="yw">
              <!-- 2.版心 -->
              <div class="center">
                <h3>公司业务/<span>Company Business</span></h3>
                <ul>
                  <li>
                    <div class="mask"></div> <!-- 遮罩层 -->
                    <div class="circle">
                      <!-- 圆形 -->
                      <img src="img/btn1.png"> <!-- 圆中的小图标 -->
                    </div>
                    <p>私募基金</p>
                  </li>
                  <li>
                    <div class="mask"></div> <!-- 遮罩层 -->
                    <div class="circle">
                      <!-- 圆形 -->
                      <img src="img/btn2.png"> <!-- 圆中的小图标 -->
                    </div>
                    <p>资产管理</p>
                  </li>
                  <li>
                    <div class="mask"></div> <!-- 遮罩层 -->
                    <div class="circle">
                      <!-- 圆形 -->
                      <img src="img/btn3.png"> <!-- 圆中的小图标 -->
                    </div>
                    <p>财富管理</p>
                  </li>
                  <li>
                    <div class="mask"></div> <!-- 遮罩层 -->
                    <div class="circle">
                      <!-- 圆形 -->
                      <img src="img/btn4.png"> <!-- 圆中的小图标 -->
                    </div>
                    <p>投资顾问</p>
                  </li>
                  <li>
                    <div class="mask"></div> <!-- 遮罩层 -->
                    <div class="circle">
                      <!-- 圆形 -->
                      <img src="img/btn5.png"> <!-- 圆中的小图标 -->
                    </div>
                    <p>宾馆餐饮</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>

         
     </main>

     <!-- 页脚 -->
     <footer class="pt-5 pb-3 footer  footer-dark bg-tertiary footer">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-4">
            <div class="pr-lg-5">
              <h1 class="heading h6 text-uppercase font-weight-700 mb-3">De小房间</h1>
              <p> &copy;2012-2022 De小房间</p>
              <p>京公网备案11000002002068号 ！京ICP备案12025439号-7</p>
            </div>
          </div>
          <!-- <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">Features</h5>
            <ul class="list-unstyled text-small nav-item">
              <li><a class="text-muted nav-link" href="#">Cool stuff</a></li>
              <li><a class="text-muted nav-link" href="#">Random feature</a></li>
              <li><a class="text-muted nav-link" href="#">Team feature</a></li>
              <li><a class="text-muted nav-link" href="#">Stuff for developers</a></li>
              <li><a class="text-muted nav-link" href="#">Another one</a></li>
              <li><a class="text-muted nav-link" href="#">Last time</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">Solutions</h5>
            <ul class="list-unstyled text-small nav-item">
              <li><a class="text-muted nav-link" href="#">Resource</a></li>
              <li><a class="text-muted nav-link" href="#">Resource name</a></li>
              <li><a class="text-muted nav-link" href="#">Another resource</a></li>
              <li><a class="text-muted nav-link" href="#">Final resource</a></li>
            </ul>
          </div> -->
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">相关网站</h5>
            <ul class="list-unstyled text-small nav-item">
              <li><a class="text-muted nav-link" href="#">字节跳动</a></li>
              <li><a class="text-muted nav-link" href="#">海外招聘</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">关于我们</h5>
            <ul class="list-unstyled text-small nav-item">
              <li><a class="text-muted nav-link" href="#">团队</a></li>
              <li><a class="text-muted nav-link" href="#">反馈建议</a></li>
              <li><a class="text-muted nav-link" href="#">联系我们</a></li>
              <li><a class="text-muted nav-link" href="#">111</a></li>
            </ul>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-center">
          <span class="">
            &copy; 2018 <a href="homepage.html" class="footer-link" target="_blank">De小房间</a>版权所有
          </span>
          <!-- <ul class="nav ml-lg-auto">
            <li class="nav-item">
              <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
            </li>
          </ul> -->
        </div>
      </div>
    </footer>
</body>
</html>